<template>
  <div :class="className" ref="stationBar" :style="{height:height,width:width}" />
</template>

<script setup>
  import * as echarts from 'echarts'
  import {
    nextTick,
    onBeforeUnmount,
    onMounted,
    ref,
    watch
  } from 'vue'
  import {
    listStatistics,
    getStatistics,
    delStatistics,
    addStatistics,
    updateStatistics
  } from "@/api/wms/statistics";
  const animationDuration = 1500

  const props = defineProps({
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    yName: {
      type: String,
      default: ''
    },
    xName: {
      type: String,
      default: '日'
    },
    barColor: {
      type: Array,
      default: () => {
        return ['#f7daef', '#f1618c']
      }
    },
    setting: {
      type: Object,
      default: () => {
        return {
          seriesName: '充电订单数量',
          yName: ''
        }
      }
    },
    chartData: {
      type: Object,
      default: () => {
        return {
          xData: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          yData: [79, 52, 200, 334, 390, 330, 34, 79, 52, 123, 334, 34, 56]
        }
      }
    },
  })

  const stationBar = ref()
  const statisticsList = ref([])
  const chart = ref(null);

  onMounted(() => {
    Chart()
    // nextTick(()=>{
    //   initChart()
    // })
  })

  onBeforeUnmount(() => {
    if (!chart.value) {
      return
    }
    chart.value.dispose()
    chart.value = null
  })

  function Chart() {
    listStatistics({
      pageNum: 1,
      pageSize: 1090
    }).then(response => {
      statisticsList.value = response.rows;
      var a = []
      var b = []
      var c = []
      for (var i = 0; i < statisticsList.value.length; i++) {
        a.push(statisticsList.value[i].createTime.substring(0, 10))
        b.push(Number(statisticsList.value[i].efficiency))
        c.push(statisticsList.value[i].todayQuantity)
      }
      props.chartData.xData = a
      props.chartData.yData = b
      initChart()

    });


  }

  function initChart() {
    chart.value = echarts.init(stationBar.value, 'lightTheme')
    chart.value.setOption({

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        padding: [5, 5]
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '14',
        bottom: '2%',
        containLabel: true
      },
      // dataZoom: {
      //   show: true,
      //   type: 'inside'
      // },
      xAxis: [{

        type: 'category',
        data: props.chartData.xData,
        // axisTick: {
        //   alignWithLabel: true
        // },
        // nameTextStyle: {
        //   color: '#fff'
        // },
        // splitLine: {
        //   lineStyle: {
        //     color: '#1d3666'
        //   }
        // },
        // axisLabel: {
        //   color: '#fff'
        // },
        // axisLine: {
        //   lineStyle: {
        //     color: this.barColor[0]
        //   }
        // }
      }],
      yAxis: [{
        // type: 'value',
        // name: 'kmh',
        // axisTick: {
        //   show: true
        // }
        type: 'value',

        position: 'left',
        alignTicks: true,
        // nameTextStyle: {
        //   color: '#fff'
        // },
        // splitLine: {
        //   lineStyle: {
        //     color: '#1d3666'
        //   }
        // },
        // axisLabel: {
        //   color: '#fff'
        // }
      }],
      series: [{

        type: 'bar',
        stack: 'vistors',
        barWidth: '20px',
        data: props.chartData.yData,
        animationDuration,
        itemStyle: {
          borderRadius: 4, // 设置圆角半径为10
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 1,
              color: props.barColor[0]
            },
            {
              offset: 0,
              color: props.barColor[1]
            },
          ])
        },
        markLine: {
          data: [{
            type: 'average',
            name: 'Avg'
          }]
        }
      }]
    })
  }

  watch(() => props.chartData, (value) => {
    nextTick(() => {
      if (!chart.value) {
        initChart();
        return;
      }
      chart.value.dispose();
      chart.value = null;
      initChart();
    });
  })
</script>
